import React from 'react';
import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';
import { Button } from 'antd';
import TaskDrop from './taskdrop';

//拖拽组件
const DropCp = () => {
  const drag_data = [];
  return (
    <DragDropContext>
      <Droppable
        direction='horizontal'
        droppableId='droppable-kanban'
        type='kanban'
      >
        {(provided, snapshot) => (
          <div
            className='dashboard_drop_wrap'
            ref={provided.innerRef}
            {...provided.droppableProps}
          >
            {drag_data.map((item, index) => {
              return (
                <Draggable
                  key={item.kanban_key}
                  draggableId={item.kanban_key}
                  index={index}
                >
                  {(provided, snapshot) => {
                    return (
                      <div
                        className='dashboard_drag_wrap'
                        ref={provided.innerRef}
                        {...provided.draggableProps}
                        {...provided.dragHandleProps}
                      >
                        <h1>{item.kanban_key}</h1>
                        <TaskDrop task={item} />
                        <Button
                          className='new_task_btn'
                          // onClick={() => {
                          //   new_task_click(item.kanban_key);
                          // }}
                          type='primary'
                          ghost
                        >
                          新建task
                        </Button>
                      </div>
                    );
                  }}
                </Draggable>
              );
            })}
            {provided.placeholder}
          </div>
        )}
      </Droppable>
    </DragDropContext>
  );
};

export default DropCp;
